<template>
    <div id="app">
      <div class="con">
        <h1>物流管理系统</h1>
        <div class="form">
          <h2>管理员登录</h2>
          <el-form :model="user" :rules="rules" ref="user" label-width="100px">
            <el-form-item label="账号" prop="username">
              <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="confirm" style="width: 70%;">
              <el-input v-model="user.confirm"></el-input>
            </el-form-item>
            <p v-html="confirmImg"></p>
            <el-form-item>
              <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    data() {
      return {
        user:{
          username:'',
          password:'',
          confirm:''
        },
        rules:{
          username:[
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ],
          pwd:[
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
          confirm:[
            {required: true, message: '验证码不能为空', trigger: 'blur'}
          ]
        },
        
        confirmImg:'',
        valid:''
      }
    },
    methods: {
     async getConfirm() {
        let res = await this.$axios.get('http://localhost:3001/getConfirm')

        console.log(res)

        this.confirmImg = res.data.data.data
        this.valid = res.data.data.text
      },
      async login() {
        if(this.valid === this.user.confirm) {
          let res = await this.$axios.post('http://localhost:3001/login',this.user)
          
          if(res.data.code === 500) {
              alert(res.data.msg)
              this.getConfirm()
            }
  
            if(res.data.code === 200) {
              alert(res.data.msg)
              localStorage['username'] = this.user.username
              localStorage['token'] = res.data.token
              this.$router.push({ path:'/index' })

            }
        }else{
          alert('验证码错误！请重新输入！')
          this.getConfirm()
        }
        

        /**submit(formName) {
             * this.$ref(formName).validate((valid) => {
             *      if(valid) {
             *          axios.post('url',{
             *              userName:this.ruleForm.pass
             *              pwd:this.ruleForm.checkPass
             *              captcha:this.ruleForm.age
             *          })
             *      }else{
             *          弹出警告
             *      }
             * })
         * }
         * 
         * 
        */
      }
    },
    mounted() {
      this.getConfirm()
    }
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    padding: 0;
    margin: 0;
  }
  
  body{
    margin: 0;
    padding: 0;
  }
  
  .con{
    width: 70%;
    height: calc(100vh);
    margin: 0;
    padding: 0;
    background-image: url('../../public/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .con h1{
    margin: 0;
    color: white;
    position: relative;
    top: 30%;
    right: 30%;
    z-index: 10;
  }
  
  .form{
    margin: 0;
    padding: 0;
    width: 30%;
    position: relative;
    top: 20%;
    left: 105%;
  }
  </style>